<script lang="ts" setup>
interface Props {
  item: any
}

defineProps<Props>()
</script>

<template>
  <!-- <div class="flex-col-start-center"> -->
  <a-space align="center" direction="vertical" size="mini">
    <span v-if="item.status === 'PAYING'" class="class-status status0">
      支付中
    </span>
    <CellDict v-else code="OrderStatusEnum" :value="item.status" />
    <div v-if="item.status === 'PAID'" class="text-13px text-gray">
      {{ item.payTime }}
    </div>
    <div v-else-if="item.status === 'CANCELED'" class="text-13px text-gray">
      {{ item.cancelTime }}
    </div>
    <div v-else-if="item.status === 'PENDING' || item.status === 'PAYING'" class="text-13px text-gray">
      {{ item.endValidTime }}后过期
    </div>
  </a-space>
  <!-- </div> -->
</template>

<style lang="less" scoped>
  .class-status {
  font-size: 14px;
  position: relative;
  padding-left: 12px;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
}
.status0 {
  color: #165dff;

  &::before {
    background: #165dff;
  }
}
.status1 {
  color: #1d2129;

  &::before {
    background: #c9cdd4;
  }
}
.status2 {
  color: #f53f3f;

  &::before {
    background: #f53f3f;
  }
}
.status3 {
  color: #ff7d00;

  &::before {
    background: #ff7d00;
  }
}
</style>
